<template>
	<view>
		<u-navbar back-icon-color="#FFFFFF" :back-text-style="backText" title-color="#FFFFFF" :background="barbg" back-text="返回"
		 title="运输车队管理">
			<view class="navbar-right" slot="right" @click="addMotorcadeManagement()">添加</view>
		</u-navbar>
		<view class="content">
			<view class="item" v-for="(item, index) in dataList" :key="index" >
				<u-row gutter="16" >
					<u-col span="9" @click.native="details(item)" >
 							<view class="item-box">
								<text class="item-text">车队名称：</text>
								<text class="content-text">{{ item.name }}</text>
							</view>
							<view class="item-box">
								<text class="item-text">负责人姓名：</text>
								<text class="content-text">{{ item.contact }}</text>
							</view>
							<view class="item-box">
								<text class="item-text">负责人电话：</text>
								<text class="content-text">{{ item.contactPhone }}</text>
							</view>
<!-- 							<view class="item-box">
								<text class="item-text">所属公司：</text>
								<text class="content-text">{{ item.depName }}</text>
							</view> -->
					</u-col>
					<u-col span="3" height="100%"  @click.native="details(item)">
						<view class="item-box item-buttom">
							<image class="left-img" src="../../../static/right.png" mode=""></image>
						</view>
					</u-col>
				</u-row>
			</view>
			<view v-show="isLoadMore" >
				<uni-load-more :status="loadStatus" :contentText="text"></uni-load-more>
			</view>
		</view>
		<view class="divider">
			<u-divider bg-color="#eaf1ff">END</u-divider>
		</view>
		<!-- <loading :istype ="istype"></loading> -->

	</view>
</template>

<script>
	import {
		getTeamList
	} from '@/api/motorcade.js'
	export default {
		data() {
			return {
				barbg: {
					background: '#5c92ff'
				},
				backText: {
					color: '#FFFFFF'
				},
				dataList: [],
				loadStatus: 'loading',
				isLoadMore: false,
				isOnshow: true,
				prevPage: null,
				istype: false,
				text: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: ""
				},
				queryInfo: {
					projectId: null,
					page: 1,
					count: 8,
				},
				// loading data

			};
		},
		onLoad(option) {
			// console.log(typeof(parseInt(option.id)))
			this.queryInfo.projectId = uni.getStorageSync('id')
		},
		onShow() {
			var pages = getCurrentPages();
			this.prevPage = pages[pages.length - 1];
			if(this.prevPage.brand === true ){
				this.getTeamListData()
			}
			// console.log(brand)
			if (this.isOnshow === true) {
				this.getTeamListData()
			}
		},
		onReachBottom() {
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.queryInfo.page += 1
				this.getTeamListData()
			}
		},
		methods: {
			// aaa(index){
			// 	console.log(index)
			// },
			addMotorcadeManagement() {
				uni.navigateTo({
					url: './addMotorcadeManagement/index'
				});
			},
			details(item) {
				console.log(item)
				uni.setStorageSync("teamName",item.name)
				uni.setStorageSync("teamId", item.id)
				let url = '/pages/motorcade/index'
				this.$urlTo.togo(url, {
					teamId: item.id,
					depName: item.depName,
					contact: item.contact,
					phone: item.contactPhone
				})
				// uni.navigateTo({
				// 	url: '../../motorcade/index'
				// });
			},
			getTeamListData() {
				getTeamList(this.queryInfo).then(res => {
					console.log(res)
					if (res.code === 1) {
						if (res.result.data) {
							if(this.prevPage.brand === true){
								// this.dataList = this.dataList.concat(res.result.data.slice(res.result.data.length - 1))
								this.dataList.splice(0, 0, res.result.data.slice(res.result.data.length - 1)[0])
								this.prevPage.brand = false
								
							} else {
								this.dataList = this.dataList.concat(res.result.data)
							}
							if (res.result.data.length < this.queryInfo.count) {
								this.isLoadMore = true
								this.loadStatus = 'nomore'
							} else {
								this.isLoadMore = false
							}
						} else {
							this.isLoadMore = true
							this.loadStatus = 'nomore'
						}
					} else {
						uni.showToast({	
							title: res.data.msg,
							icon: 'none'
						})
						this.isLoadMore = false
						if (this.page > 1) {
							this.page -= 1
						}
					}
					this.dataList.forEach(item => {
						if (item.depName === null) {
							item.depName = '碧落有限公司'
						}
					})
					// this.dataList = res.result.data
					// console.log(res)
				})
				
				if (this.isOnshow === true) {
					this.isOnshow = false
				}
			}

		}
	};
</script>

<style lang="scss" scoped>
	.navbar-right {
		padding: 0px 40rpx;
		color: #ffffff;
	}

	.content {
		.item {
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			padding: 20rpx;
			background-color: #ffffff;
			margin-bottom: 2rpx;
			.item-box {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				height: 50rpx;
				image {
					width: 100%;
					height: 100%;
				}
				.item-text {
					width: 190rpx;
					display: inline-block;
					font-size: 30rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 1rpx;
					color: #b1b8c8;
					line-height: 50rpx;
					text-align-last: justify;
				}

				.content-text {
					// overflow: hidden;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 1px;
					color: #2c3240;
					font-weight: bold;
				}
			}

			.item-buttom {
				text-align: right;

				.left-img {
					width: 20rpx;
					height: 29rpx;
				}
			}
		}

		.item:active {
			background-color: rgb(235, 237, 238);
		}
	}

	.divider {
		margin-top: 50rpx;
	}
</style>
